<template>
	<!-- 搜索框、地图 -->
	<view class="search">
		<view class="ipt-container">
			<view class="left" @click="handleOpenAddres">
				<text>{{selectCity}}</text>
				<image class="icon" src="https://images.linglinggong.net/static/wgc_icon/1.png" mode="aspectFill">
				</image>
			</view>
			<!-- <view class="main" @click="handleSearch">
				<image class="search_icon" src="/static/wgc_icon/2.png" mode="aspectFill"></image>
				<input type="text" :value="word" placeholder="请输入关键词" disabled="true" placeholder-class="plaho" />
			</view> -->
			<view v-if="isSrtf" class="msg">
				<view class="sanjiao"></view>
				<view class="c-city">
					<view class="change">切换到</view>
					<view class="city" @click="handleOpenAddresr">{{citys}}</view>
					<view class="" @click="closeChangeCity()">
						<uni-icons type="closeempty" size="20" color="#fff"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view style="display: none;" class="map" @click="handleMap">{{ type }}</view>
		<!-- 省市区 -->
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="cityOnConfirm"
			themeColor="#007AFF"></simple-address>
	</view>
</template>
<script>
	import unit from '../../libs/newUnit.js'
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	export default {
		components: {
			simpleAddress
		},
		props: {
			type: {
				type: String,
				default: '地图'
			},
			word: {
				type: String,
				default: ''
			},
			srtf: {
				type: Boolean,
				default: ''
			},
			citys: {
				type: String,
				default: ''
			},
			isSrtf: false
		},
		data() {
			return {
				selectCityty: true,
				userType: 0, //0雇员 1雇主
				areaCode: '3307', //当前区域的行政代码
				// selectCity: '义乌',
				cityPickerValueDefault: [10, 6, 6], //省市区弹框
				// 用户当前的经纬度信息
				currentLocation: {
					latitude: 0,
					longitude: 0,
					// address: '',
					// name: '',//街道名字
				},
			}
		},
		computed: {
			'selectCity': function() {
				return this.$store.state.selectCity
			}
		},
		watch: {
			citys(val) {
				console.log('l c: ', val);
			}
		},
		methods: {
			closeChangeCity() {
				this.$emit('changeIsSrtf', false)
			},
			// 用户选中省市区时
			async cityOnConfirm(e) {
				console.log('地址', e)
				let v = unit.get_Open_area(e.areaCode)
				if (!v) {
					uni.navigateTo({
						url: '/pages/jiameng/jiameng'
					})
					return
				}
				let shuz = ""
				// console.log(e)
				if (!uni.getStorageSync("Openarea")) {
					let res = await this.$fetch(this.$api.get_Open_area, {}, 'GET')
					uni.setStorageSync('Openarea', res.data)
					if (res.code) {
						this.$store.commit('selectCityChange', "东阳市")
						//this.getDistrictSelect(this.$store.state.selectCity)
						uni.setStorageSync('region', "330783")
						setTimeout(() => {
							this.$emit('areaCode', "330783")
						}, 200)
						return uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					shuz = res.data.split(',')
				} else {
					shuz = uni.getStorageSync("Openarea").split(',')
				}
				//	console.log(shuz)
				var shu = 0;
				for (var i = 0; i < shuz.length; i++) {
					if (shuz[i] == e.areaCode) {
						shu = 1;
						break
					}
				}
				if (shu == 0) {
					uni.showToast({
						title: '尚未开放当前区域~',
						icon: 'none'
					})
					uni.navigateTo({
						url: '/pages/jiameng/jiameng'
					})
					return
					this.$store.commit('selectCityChange', "东阳市")
					//	this.getDistrictSelect(this.$store.state.selectCity)
					uni.setStorageSync('region', "330783")
					setTimeout(() => {
						this.$emit('areaCode', "330783")
					}, 200)
				} else {
					// if (!uni.getStorageSync('token')) {
					// 	uni.navigateTo({
					// 		url: '/pages/login/login'
					// 	})
					// }
					this.$store.commit('selectCityChange', e.labelArr[2])
					//	this.getDistrictSelect(this.$store.state.selectCity)
					uni.setStorageSync('region', e.areaCode)
					uni.setStorageSync('region2', e.areaCode)
					setTimeout(() => {
						this.$emit('areaCode', e.areaCode)
					}, 200)
				}
				// if (uni.getStorageSync('region') != uni.getStorageSync('region1').slice(0, 6)) {
				// 	this.$emit('isChangeCity', true)
				// 	uni.showToast({
				// 		title: '提示切换城市',
				// 		icon: 'none'
				// 	})
				// }
				//	console.log(e)
				// this.$store.commit('selectCityChange', e.labelArr[2])
				// this.getDistrictSelect(this.$store.state.selectCity)
				//主要是通过$emit方法来实现传参的方式，第一个参数是自定义事件名称，第二个则是要传的数据
				// setTimeout(() => { this.$emit('areaCode', this.areaCode) }, 200)
			},
			// 行政区域查询；判断用户选中城市，获取经纬度
			getDistrictSelect(city) {
				uni.request({
					url: 'https://restapi.amap.com/v3/config/district?parameters',
					data: {
						key: 'd73cc951a96637a251a9a2446b48ce9c',
						keywords: city,
						subdistrict: 1
					},
					success: res => {
						if (parseInt(res.data.status) !== 1) return uni.showToast({
							title: '请求失败，请稍后再试~',
							icon: 'none'
						})
						//console.log(res.data.districts[0].adcode)
						// 获取 区的 行政代码
						this.areaCode = res.data.districts[0].adcode
						// 定位到选中城市
						// this.currentLocation.longitude = res.data.districts[0].center.split(',')[0]
						// this.currentLocation.latitude = res.data.districts[0].center.split(',')[1] 
						// console.log('this.currentLocation',this.currentLocation) // 地理信息
					}
				})
			},
			getDistrictSelectt(city) {
				uni.request({
					url: 'https://restapi.amap.com/v3/config/district?parameters',
					data: {
						key: 'd73cc951a96637a251a9a2446b48ce9c',
						keywords: city,
						subdistrict: 1
					},
					success: res => {
						if (parseInt(res.data.status) !== 1) return uni.showToast({
							title: '请求失败，请稍后再试~',
							icon: 'none'
						})
						this.areaCode = res.data.districts[0].adcode
						return res.data.districts[0].adcode
					}
				})
			},
			// 打开地图
			handleMap() {
				let mapPath = uni.getStorageSync('userType') == 1 ? '/pages/map-look-for/map-look-for' :
					'/pages/map-look-for/staff-map-look-for'
				uni.navigateTo({
					url: mapPath,
					animationType: "none"
				})
			},
			//打开省市区弹框
			handleOpenAddres() {
				this.$refs.simpleAddress.open();
				this.$emit('hideModal')
			},
			//切换城市
			async handleOpenAddresr() {
				// this.srtf = false
				// this.isSrtf = false
				this.$emit('changeIsSrtf', false)
				let vs = this.getDistrictSelect(this.citys)
				let shuz = ""
				if (!uni.getStorageSync("Openarea")) {
					let res = await this.$fetch(this.$api.get_Open_area, {}, 'GET')
					uni.setStorageSync('Openarea', res.data)
					shuz = res.data.split(',')
				} else {
					shuz = uni.getStorageSync("Openarea").split(',')
				}
				setTimeout(() => {
					var shu = 0;
					uni.setStorageSync('region', this.areaCode)
					for (var i = 0; i < shuz.length; i++) {
						if (shuz[i] == this.areaCode) {
							shu = 1;
							break
						}
					}
					if (shu == 0) {
						uni.navigateTo({
							url: '/pages/jiameng/jiameng'
						})
					} else {
						this.$store.commit('selectCityChange', this.citys)
						this.$emit('areaCode', this.areaCode)
					}
				}, 800)
			},
			// 打开搜索页
			handleSearch() {
				uni.navigateTo({
					url: '/pages/search/search',
					animationType: "none"
				})
			},
		}
	}
</script>
<style lang="less">
	.search {
		display: flex;
		align-items: center;
		padding: 0 30rpx;

		.ipt-container {
			// width: 686rpx;
			// height: 72rpx;
			// background-color: #F2F2F2;
			border-radius: 38rpx;
			display: flex;
			position: relative;

			.msg {
				width: 338rpx;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: -90rpx;
				z-index: 99999;

				.sanjiao {
					border-width: 15rpx 20rpx;
					border-style: dashed dashed solid dashed;
					/*IE6下, 设置余下三条边的border-style为dashed,即可达到透明的效果*/
					border-color: transparent transparent #4c4c4c transparent;
					width: 0;
					height: 0;
					overflow: hidden;
					font-size: 0;
					/*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
					line-height: 0;
					margin-left: 286rpx;
					margin: 0 auto;
				}

				.c-city {
					font-weight: 500;
					line-height: 48rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 70rpx;
					background: rgba(0, 0, 0, 0.7);
					border-radius: 12rpx;
					font-size: 32rpx;
					padding: 0 20rpx;
					box-sizing: border-box;

					.change {
						color: #fff;
						height: 48rpx;
						text-align: center;
						margin-left: 13rpx;
					}

					.city {
						color: #402110;
						height: 48rpx;
						padding: 0 10rpx;
						margin-left: 12rpx;
						text-align: center;
						background: #FDC928;
						border-radius: 8rpx;
					}
				}
			}

			.left {
				display: flex;
				align-items: center;
				height: 100%;
				position: relative;
				padding-right: 20rpx;
				color: #262626;
				font-size: 36rpx;

				// &::before {
				// 	content: "";
				// 	position: absolute;
				// 	background-color: rgba(64, 33, 16, 0.1);
				// 	border-radius: 0.5px;
				// 	width: 2rpx;
				// 	height: 30rpx;
				// 	right: 0;
				// }
				text {
					margin-left: 30rpx;
					margin-right: 4rpx;
				}

				.icon {
					width: 14rpx;
					height: 8rpx;
				}
			}

			.main {
				flex: 1;
				display: flex;
				align-items: center;
				color: rgba(64, 33, 16, 0.40);

				.search_icon {
					width: 30rpx;
					height: 30rpx;
					margin: 0 30rpx;
					margin-right: 20rpx;
				}

				input {
					flex: 1;
					color: #402110;
				}

				.plaho {
					color: rgba(64, 33, 16, 0.40);
				}
			}
		}

		.map {
			width: 56px;
			color: #F39B19;
			margin-left: 30rpx;
		}
	}
</style>